<template>
  <a-breadcrumb class="breadcrumb_wrap">
    <a-breadcrumb-item><router-link to="/front/dashboard" style="color:#1890ff">首页</router-link></a-breadcrumb-item>
    <a-breadcrumb-item><router-link :to="lists[0].path">{{ lists[0].title }}</router-link></a-breadcrumb-item>
  </a-breadcrumb>
</template>

<script>
export default {
  name: 'Breadcrumb',
  data () {
    return {
      lists: []
    }
  },
  // 监听路由变化
  watch: {
    '$route': {
      handler (to, from) {
        // let matched = to.matched // this.$route.matched
        // 这个地方是为了固定第一级目录是首页不变
        // if (matched.length && matched[0].name !== 'front') {
        //   matched = [{ path: '/front/dashboard', name: 'dashboard', meta: { title: '首页' } }, ...matched]
        // }
        // console.info(matched)
        // this.lists = [ to.matched[to.matched.length - 1].meta ]
        this.lists = [ to.meta ]
      },
      immediate: true,
      deep: true
    }
  },
  created () {
  },
  methods: {
  }
}
</script>
<style lang="stylus" scoped>
@import '../../../styles/var.styl'
.breadcrumb_wrap
  width 1200px
  height: 50px;
  line-height: 50px;
  margin 0 auto
  padding-left 20px
</style>
